import React, { Component } from 'react'
import { Form, Input, Button, Select } from 'antd';
import {getAllRoles} from '../../api/role'

export default class addUsers extends Component {
    state={
        addUser:{},
        roleData:[]
    }
    onValuesChange=(changedValues, allValues)=>{
       this.setState({
        addUser:allValues
       })
    }
    componentDidMount() {
        this.getRolesList()
    }
    // 获取role所有数据
    getRolesList = async () => {
        const res = await getAllRoles()
        console.log('获取到的role数据', res.data);
        this.setState({
            roleData: res.data
        })
    }
    render() {
        const { Option } = Select;
        const { data } = this.props
        const {roleData} =this.state
        console.log('this.props',this.props);
        console.log('data',data);
        return (
            <Form
                name="basic"
                labelCol={{ span: 5 }}
                onValuesChange={this.onValuesChange}
                wrapperCol={{ span: 16 }}
                initialValues={{ remember: true }}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名字"
                    name="account"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="用户密码"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item
                    label="邮箱地址"
                    name="email"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="用户角色"
                    name="role"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Select
                        allowClear
                    >
                        {
                            roleData.map(item => {
                                return <Option key={item._id} value={item._id}>{item.name}</Option>
                            }) 
                        }
                    </Select>
                </Form.Item>
            </Form>
        )
    }
}
